<template>
  <div class="banner">
    标签 - {{ tag.tagName }} <br>
    <span style="font-size: 0.5em;color: #ece6e6">合计{{ tag.blogCount }} 篇博客</span>
  </div>
  <br>
  <el-row justify="center">
    <el-col :span="4" :xs="0" :sm="1" :md="2" :lg="3"></el-col>
    <el-col :span="18" :xs="24" :sm="22" :md="20" :lg="18">
      <el-space wrap size="large" v-if="tag.blogCount>0">
        <el-card v-for="item in blogs" style="width: 300px"
                 :body-style="{padding:'0px'}">
          <el-image :src="item.blogImg"
                    fit="cover"
                    @click="toViewBlog(item.blogId)"
                    style="width: 100%;height: 180px">
          </el-image>
          <div style="padding: 10px">
            <el-link class="blog_title" @click="toViewBlog(item.blogId)">{{ item.blogTitle }}</el-link>
            <el-divider></el-divider>
            <span><el-icon><Clock/></el-icon>：{{ item.releaseTime }}</span> <br>
            <el-icon>
              <Discount/>
            </el-icon>
            ：
            <el-tag v-for="tag in item.tags" :key="item.tagId">{{ tag.tagName }}</el-tag>
          </div>
        </el-card>
      </el-space>
      <el-card v-else style="height: 40vh;text-align: center;padding-top: 100px">
        <h2 style="font-weight: bolder;color: #257763">当前分类没有博客</h2>
      </el-card>
    </el-col>
    <el-col :span="4" :xs="0" :sm="1" :md="2" :lg="3"></el-col>
  </el-row>
  <br>
</template>

<script>
export default {
  name: "TagShow",
  props: ["tagId"],
  created() {
    // 监听路由参数的变化
    this.$watch(
        () => this.$route.params,
        (newParams, oldParams) => {
          // 对路由参数做出响应，0就初始化，其他就通过查询数据库初始化
          this.init()
        })
    this.init()
  },
  data() {
    return {
      tag: {},
      blogs: []
    }
  },
  methods: {
    async init() {
      let {data} = await this.$http.get("/api/tag/getTagById", {params: {tagId: this.tagId}})
      this.tag = data
      let {data: result2} = await this.$http.get("/api/blog/getBlogByTagId", {params: {tagId: this.tagId}})
      this.blogs = result2.dataMap.blogs
    },
    // toTag(tagId) {
    //   this.$router.push({path: '/tag/' + tagId})
    // },
    toViewBlog(blogId) {
      this.$router.push({path: '/article/' + blogId})
    }
  }
}
</script>

<style scoped>
.banner {
  background-image: url('/headImg/tagShow.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;

  color: white;
  font-size: 3em;
  font-weight: bolder;
  text-align: center;
  padding-top: 200px;
}
</style>